<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
  <script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
  <script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
  <script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
  <div id="app">
    <el-tag type="info"  v-if="inputVisible"  effect="dark" closable="true" :disable-transitions="disable" @close="handleClose">添加用户</el-tag>
    <div v-if="inputVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录名" prop="username">
          <el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="性別" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="ruleForm.role" placeholder="请选择活动区域">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="总经理" value="2"></el-option>
            <el-option label="用户" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</body>
<script>
  axios.defaults.withCredentials = true
  new Vue({
    el: "#app",
    data: {
      ruleForm: {
        username: '',
        password: '',
        name: '',
        phone: '',
        status: '',
        role: '',
        age: '',
        sex: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 30,
            message: '长度在 6 到 30 个字符'
          }, {
            pattern: /^(\w){6,20}$/,
            message: '只能输入6-20个字母、数字、下划线'
          }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性別', trigger: 'change' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value < 18) {
                  callback(new Error('必须年满18岁'));
                } else {
                  callback();
                }
              }
            }, trigger: 'blur'
          }
        ] 
      },
      /*选项卡*/
      inputVisible: true,
      disable: false,
    },
    methods: {
      // 关闭
      handleClose() {
        this.inputVisible = false;

      },
      // 创建 
      submitForm(formName) {
                    let peams = new URLSearchParams();
                    for(let i in this.ruleForm){
                      peams.append(i,this.ruleForm[i])
                    }
                    // 发起请求
                  axios.post("http://localhost/user?method=add",peams).then(resp=>{
                    if(resp){
                      this.$message.success(resp.data.message);
                      // 使用时间跳转
                      setTimeout(() => {
                        location.href='index.html'
                      }, 1500);
                    }

                  });
        
      },
       // 重置 
      resetForm(formName) {
        // 获取当前的值，进行重置
        this.$refs[formName].resetFields();	

      }
    }
  })
</script>

</html>